window.addEventListener('load', function () {
    let $file = document.querySelector('#image-upload')
    let $output = document.querySelector('#output')

    $file.addEventListener('change', function (e) {
        let {files} = e.target

        let [file] = files
        // 如何接收图片文件数据
        //
        // 我们在监听input[type="file"]的change事件时，可以在target里边拿到一个files的对象。
        // 该对象为本次上传传入的文件列表集合，一般来说我们取第一个元素就是了。
        // 我们拿到了一个File类型的对象，接下来就是用Image来接收这个File对象了。
        // 这里会用到一个浏览器提供的全局对象URL，URL提供了一个createObjectURL的方法。
        // 方法接收一个Blob类型的参数，而File则是继承自Blog，所以我们直接传入就可以了。
        // 然后再使用一个Image对象进行接收就可以了：
        let $img = new Image()
        let $canvas = document.createElement('canvas')
        let context = $canvas.getContext('2d')

        $img.addEventListener('load', _ => {
            // draw image
            let width = $img.width
            let height = $img.height
            $canvas.width = width
            $canvas.height = height
            // 通过canvas获取我们想要的数据
            //
            // canvas可以直接渲染图片到画布中，可以是一个Image对象、HTMLImageElement及更多媒体相关的标签对象。
            // 所以我们上边会把数据暂存到一个Image对象中去。
            // 我们在调用drawImage时需要传入x、y、width、height四个参数，前两个必然是0了，关于后边两个属性，正好当我们的Image对象加载完成后，直接读取它的width和height就是真实的数据：
            context.drawImage($img, 0, 0, width, height)
            //获取rgba相关的数据
            let pixels = context.getImageData(0, 0, width, height)

            let results = getRGBA(pixels)

            // build box-shadow
            $output.style.boxShadow = results.map(item =>
                    `${item.x}px ${item.y}px rgba(${item.r}, ${item.g}, ${item.b}, ${item.a})`
            ).join(',')
        })

        $img.id = 'test'
        $img.src = URL.createObjectURL(file)
    })
})

function getRGBA(pixels) {
    let results = []
    let {width, height, data} = pixels
    //pixels为每相邻的四个元素为一个像素点的rgba描述，一个类似这样结构的数组：[r, g, b, a, r, g, b, a]
    for (let i = 0; i < data.length / 4; i++) {
        results.push({
            x: i % width | 0,
            y: i / width | 0,
            r: data[i * 4],
            g: data[i * 4 + 1],
            b: data[i * 4 + 2],
            a: data[i * 4 + 3]
        })
    }

    return results
}
